@charset "utf-8";
:root {
    --color-rgb: 238 77 80;
    --star-rgb: 238 77 80;

    /*--color-bg-1: #fff;*/
    /*--gray-2: 242, 243, 245;*/
    /*--gray-3: 229, 230, 235;*/
    /*--gray-4: 201, 205, 212;*/
    /*--gray-8: 78, 89, 105;*/
    /*--gray-10: 29, 33, 41;*/
    /*--arcoblue-6: 22, 93, 255;*/
    /*--link-6: var(--arcoblue-6);*/
    /*--color-neutral-2: rgb(var(--gray-2));*/
    /*--color-neutral-3: rgb(var(--gray-3));*/
    /*--color-neutral-4: rgb(var(--gray-4));*/
    /*--color-neutral-8: rgb(var(--gray-8));*/
    /*--color-secondary: var(--color-neutral-2);*/
    /*--color-neutral-10: rgb(var(--gray-10));*/
    /*--color-secondary-hover: var(--color-neutral-3);*/
    /*--color-text-2: var(--color-neutral-8);*/
    /*--border-radius-small: 2px;*/

    --font-color: 0deg 0% 15%;
    --font-alpha: 100%;
    --color: rgb(var(--color-rgb));
    --color-link: rgb(var(--color-rgb) / .7);
    --color-sub-rgb: 251 145 104;
    --color-sub: rgb(var(--color-sub-rgb));
    --font-color-hsl: 0deg 0% 10%;
    --font-color-alpha: 100%;
    --font-size-small: .75rem;
    --font-size-medium: .85rem;
    --font-size-normal: 1rem;
    --font-weight-normal: 400;
    --font-weight-title: 600;
    --font-spacing: .01em;
    --top-font-family: PingFang SC, -apple-system, Century Gothic, system-ui, sans-serif;
    --font-family-slogn: 得意黑, SmileySans, var(--top-font-family);
    --font-family-code: Monaco, Consolas, monospace;
    --font-family-title: var(--top-font-family);
    --font-size-title: 0.975rem;
    --nav-height: 3.75rem;
    --text-shadow: 0 .04rem .2rem rgb(0 0 0 / 30%);
    --animation-on: cubic-bezier(.6, .1, 0, 1);
    --animation-in: cubic-bezier(.6, .2, .25, 1);
    --animation-ot: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards;
    --animation-otf: opacity .5s var(--animation-in) backwards, transform 1s var(--animation-in) backwards, filter .7s var(--animation-in) backwards;

    --menu-widgets-color: rgb(48, 49, 51);
    --bg: hsl(0deg 0% 0% / 5%);
    --radius: .5rem;
    --icon-size: 1.35rem;
    --card-size: 22.5rem;
    --gap-divs: 1.5rem;
    --gap-span: 1rem;
    --gap-area: 2rem;
    --sticky-top: 3.5rem;
    --box-shadow: 0 .2rem 1rem 0 hsl(var(--font-color-hsl) / 10%);
    --box-shadow-white: 0 .2rem 1rem 0 hsl(var(--font-color-hsl) / 3%);
    --box-shadow-color: var(--box-shadow), 0 2rem 2rem -2rem rgb(var(--color-rgb) / 30%);
    --w-bg: white;
    --h-bg: hsl(0deg 0% 99%);
    --archives-stroke: 1px hsl(0deg 0% 10% / .2);
    --edge-lr: 2rem;
    --edge-tb: 3.25rem;
    --edge-tb-video: 5.25rem;
    --nav-font-color: #303133;
    --page-shadow-border: 0 8px 16px -4px #2c2d300c;
    --paginator-bg: #fff;
    --paginator-border: #e3e8f7;

    --content-size: 1000px;
    --fancybox-opacity: 0.88;
}

:root body {
    --border: .05rem solid hsl(var(--font-color-hsl) / 10%);
    --s-color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
    --f-color: white;
    --s-shadow: none;
    --nav-color: hsl(0deg 0% 100% / 75%);
    --icon-width: .9rem;
}

::selection {
    background: rgb(var(--color-rgb) / 50%);
    color: #FFF;
}

/* 滚动条 */
*::before {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-rgb) / 50%) #0000;
}

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-thumb {
    border: 5px solid #0000;
    border-radius: var(--radius);
    background: hsl(var(--font-color) / 10%) content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-rgb) / 50%) content-box;
}

::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
    background: #0000;
}

.mask-scroll {
    white-space: nowrap;
    overflow: scroll;
    gap: var(--gap-area);
    margin: 0 calc(var(--edge-lr) * -1);
    padding: 0 var(--edge-lr);
    -webkit-mask: linear-gradient(90deg, #00000000, #000) no-repeat 0 0 / var(--edge-lr) 100%, linear-gradient(90deg, #000, #000) no-repeat center / calc(100% - var(--edge-lr) * 2) 100%, linear-gradient(90deg, #000, #00000000) no-repeat 100% center / var(--edge-lr) 100%;
    display: flex;
    flex-direction: row;
}

.mask-scroll::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar {
    display: none;
}

.mask-scroll, .no-scrollbar {
    scrollbar-width: none;
}

body {
    --hue: 359deg;
    --satura: 77%;
    --light: 90%;
    --sun-size: 60vmin;
    --new-size: 16.5rem;
    --tags-color: hsl(var(--hue) var(--satura) var(--light) / 5%);
    --title-color: hsl(var(--hue) var(--satura) 77%);
    --sun-color: hsl(var(--hue) var(--satura) var(--light) / 100%);
    --star-color: hsl(var(--hue) var(--satura) 90%);
    --star-shadow-out: hsl(var(--hue) var(--satura) var(--light) / 70%);
    --star-shadow-in: hsl(var(--hue) var(--satura) var(--light) / 70%);
    --flow-color: hsl(var(--hue) var(--satura) var(--light) / 100%);
    --title-shadow: 0 0 1rem var(--star-shadow-in);
    --animation: transform 1.25s cubic-bezier(.6, .2, .25, 1) backwards, opacity 1s cubic-bezier(.6, .2, .25, 1) backwards;
}

:root body:where(.theme-dark) {
    --star-rgb: 255 255 255;
    --font-color: 214deg 15% 70%;
    --font-color-hsl: 214deg 15% 70%;
    --w-bg: hsl(214deg 64% 10%);
    --h-bg: hsl(214deg 64% 6%);
    --f-color: var(--h-bg);
    --bg: hsl(0deg 0% 100% / 4%);
    --archives-stroke: 1px hsl(0deg 0% 100% / 75%);
    --hue: 214deg;
    --light: 30%;
    --star-shadow-out: hsl(214deg 77% 30%);
    --nav-font-color: #FFFFFF;
    --paginator-bg: #1d1e22;
    --paginator-border: #42444a;

    --s-bg: hsl(0deg 0% 100% / 4%);
    --menu-widgets-color: #FFF;
}

:root body:where(.single-format-video) {
    --font-color-hsl: 0deg 0% 100%;
    --font-color-alpha: 75%;
    --bg: rgba(255 255 255 / .05);
    --s-bg: rgba(255 255 255 / .05);
    --w-bg: rgba(255 255 255 / .05);
    --s-box-shadow: var(--box-shadow-white);
    --h-bg: #000;
    --f-color: var(--h-bg);
    --s-shadow: var(--text-shadow);
    --nav-font-color: white;
    text-shadow: var(--text-shadow);
    background: var(--h-bg);
}

pre, code, kbd, tt, var {
    font: var(--font-weight-normal) var(--font-size-medium)/2 var(--font-family-code);
    hyphens: none;
}

kbd {
    font: inherit;
    color: rgb(var(--color-sub-rgb) / 70%);
    margin: 0 .2em;
}

mark, ins {
    background: #fff9c0;
    text-decoration: none;
}

body.message-single {
    --h-bg: #0c0505;
    --nav-font-color: #FFFFFF
}

:root body:where(.message-single) {
    --font-color: 0deg 0% 100%;
    --font-color-hsl: 0deg 0% 100%;
    --font-color-alpha: 75%;
    --bg: rgba(255 255 255 / .05);
    --s-bg: rgba(255 255 255 / .05);
    --w-bg: rgba(255 255 255 / .05);
    --s-box-shadow: var(--box-shadow-white);
    background: var(--h-bg);
}

:root body:where(.post-single,.single-format-video):not(.nav-fixed) {
    --s-color: hsl(0deg 0% 100% / 75%);
    --f-color: hsl(0deg 0% 0% / 75%);
    --s-shadow: var(--text-shadow);
}

.commentContent p, .user-info, .message-title > * {
    color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
    text-decoration: none;
    outline: 0;
    transition: .7s;
}

/* 通用属性 */
.hidden {
    display: none;
}

.flex-ul {
    width: 100%;
    z-index: 1;
    position: relative;
    flex-wrap: wrap;
    gap: 1rem;
}

.fade-before {
    --trfm: scale(.98) translateY(1rem);
    opacity: 0;
    transform: var(--trfm, translateY(1rem));
    transform-origin: var(--trfm-or, top);
    transition: transform cubic-bezier(.6, .2, .25, 1) .7s, opacity .3s;
}

.fade-after {
    opacity: 1;
    transform: var(--trfm-in, none);
}

.flow-ul {
    --trfm: translateX(1rem);
    --trfm-or: left;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(20%, 34.5rem, 100%);
    overflow: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-padding: var(--edge-lr);
    padding: var(--edge-lr);
    margin: calc(var(--edge-lr) * -1);
    flex: calc(100% + var(--edge-lr) * 2);
    gap: var(--gap-divs);
}
.single .site-header{
    --font-color: 0deg 0% 100%;
    --font-alpha: 90%;
}
:root body:where(.single-format-gallery, .single-format-audio, .single-format-video){
    --font-color: 0deg 0% 100%;
    --font-alpha: 75%;
    --bg: rgba(255 255 255 / .05);
    --s-bg: rgba(255 255 255 / .05);
    --w-bg: rgba(255 255 255 / .05);
    --s-box-shadow: var(--box-shadow-white);
    --h-bg: #000;
}
.box {
    padding: var(--gap-divs);
    background: var(--s-bg, rgb(255 255 255 / .5));
    border: 2px dotted transparent;
    border-radius: var(--radius);
    box-shadow: var(--box-shadow-white);
}

.flow-ul > * {
    scroll-snap-align: start;
}

img.loaded {
    animation: opacity 1s;
}

.post-title, .page-title {
    font-size: 1.8rem;
}

/* font */
@font-face {
    font-family: "SmileySans";
    /*src: url(https://npm.onmicrosoft.cn/hanyanzhi@1.0.1/font/SmileySans.woff2);*/
    src: url(https://cdn-oss.qiaoxiao.top/font-family/SmileySans.woff2);
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.nav-title {
    font-weight: bold;
}

.site-menu > li:hover > .nav-link > .nav-title {
    color: var(--color);
}

:where(.tag-list,.site-footer,.about-myself,.site-main,.home-single,.author-date,.site-info-list,.widget-area,.reply-content) a:not([role="button"]), #dropdown-item {
    transition: .7s;
    cursor: pointer;
    background: linear-gradient(90deg, rgb(var(--color-rgb) / 50%), rgb(var(--color-sub-rgb) / 50%)) no-repeat left 100% / 0 1px;
}

a:where(:hover, :focus, :active) {
    color: var(--color);
}

:where(.tag-list,.site-footer,.about-myself,.site-main,.home-single,.author-date,.site-info-list,.widget-area,.reply-content) a:not([role="button"]):hover, #dropdown-item:hover {
    background: linear-gradient(90deg, rgb(var(--color-rgb) / 50%), rgb(var(--color-sub-rgb) / 50%)) no-repeat left 100% / 100% 1px;
    color: rgb(var(--color-rgb) / 80%);
}

:where(.current-menu-item) > a {
    color: rgb(var(--color-rgb) / 80%);
}

.not-single {
    padding-block: calc(var(--edge-tb) + var(--gap-divs)) var(--gap-area);
}

.font-black {
    color: var(--nav-font-color);
}

#thanks .text-effect {
    animation-name: opacity;
    animation-fill-mode: backwards;
    font-style: normal;
}

.num .text-effect {
    animation-name: opacity;
    animation-fill-mode: backwards;
    font-style: normal;
}

em {
    font-style: normal;
}

.count-num h6 {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-normal);
    color: hsl(var(--font-color-hsl) / .5);
}

.count-num .num {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-variant: tabular-nums;
    background: linear-gradient(135deg, #0000 0%, var(--title-color) 25%, var(--title-color) 75%, #0000) no-repeat 0 / 400%;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px var(--title-color);
    -webkit-background-clip: text;
    cursor: alias;
    animation: perspective-reverse .5s ease-out forwards, numbg-reverse .7s ease-out forwards;
}
.statistics .count-num #hot-num{
    display: flex;
    justify-content: center;
}
.count-num .num:hover {
    animation: perspective-hover .5s ease-in forwards, numbg-hover .7s ease-in forwards;
}

.part-title {
    line-height: 1.5rem;
    color: hsl(var(--font-color-hsl) / .2);
}

/* nav */
.header-area {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    z-index: 30;
    gap: var(--gap-divs);
    align-items: center;
    justify-content: space-between;
    transition: .5s;
}

.site-logo {
    z-index: 30;
    opacity: 1;
    transition: .5s;
}

.site-menu {
    margin: 0 auto 0 0;
    transition: .5s;
}

.site-icon {
    display: flex;
    align-items: center;
    gap: var(--gap-divs);
}

.header-area .iconfont {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    cursor: pointer;
    background: none;
}

.header-area .iconfont.menu-open {
    display: none;
}

.header-area .iconfont.out {
    color: var(--s-color);
    text-shadow: var(--s-shadow);
}

.header-area .iconfont::after, .header-area .iconfont::before {
    vertical-align: middle;
    z-index: 2;
}

.menu-out .menu a {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    background: none !important;
}

.menu-out .menu {
    display: flex;
}

.menu-out .menu > li > a {
    position: relative;
    z-index: 2;
    color: var(--s-color);
    text-shadow: var(--s-shadow);
    line-height: 2.5rem;
    padding: 0 0.6rem;
    font-weight: var(--font-weight-title);
}

.menu-out .menu li ul {
    margin: 0;
    padding: 0.5rem;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    z-index: 2;
    transition: .3s;
}

.menu-out .menu li ul > li ul {
    display: block;
    padding: 0;
    margin: 0.5rem -0.5rem -0.5rem;
    line-height: 1.5;
    font-size: var(--font-size-medium);
}

.menu-out .menu > li > ul {
    position: fixed;
    z-index: 1;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    padding: calc(var(--nav-height) + 1rem) var(--edge-lr) 1.5rem calc(var(--icon-size) + var(--edge-lr) + 1.6rem);
    background: var(--w-bg) linear-gradient(90deg, hsl(var(--font-color) / .1), hsl(var(--font-color)/ .1)) no-repeat left var(--nav-height) / 100% 1px;
    border-radius: 0 0 var(--radius) var(--radius);
    visibility: hidden;
    transform: rotateX(-20deg);
    transform-origin: top;
    box-shadow: var(--box-shadow-white);
    backdrop-filter: blur(10px) saturate(1.8);
    pointer-events: none;
    transition: var(--animation-in) .4s, pointer-events 0s;
}

.menu-out .menu a[target="_blank"]:after,
.menu-out .menu ul .menu-item-has-children > a::after,
.menu-out .menu > li > ul > li .menu-item-object-post_tag > a::before {
    content: "\e627";
    text-align: center;
    opacity: .3;
    transition: .5s;
    font-size: var(--font-size-small);
}

.menu-out .menu li {
    position: relative;
    border-radius: var(--radius);
    transition: .3s;
}

.sub-menu li a {
    color: hsl(var(--font-color) / var(--font-alpha));
    outline: 0;
    text-decoration: none;
}

.menu-out .menu li li {
    padding: 0.75rem;
}

.menu-out .menu .menu-says > a::before {
    content: "\e620";
}

.menu-out .menu .menu-tags > a::before {
    content: "\e693";
}

.menu-out .menu .menu-archive > a::before {
    content: "\e666";
}

.menu-out .menu .menu-board > a::before {
    content: "\e630";
}

.menu-out .menu .menu-friends > a::before {
    content: "\e632";
}

.menu-out .menu .menu-books > a::before {
    content: "\e640";
}

.menu-out .menu .menu-me > a::before {
    content: "\e615";
}

.menu-out .menu .menu-info > a::before {
    content: "\e655";
}

.menu-out .menu .menu-people > a::before {
    content: "\e66c";
}

.menu-out .menu > li > ul > li .menu-item-object-post_tag > a::before {
    content: "\e659";
}

.menu-out .menu .menu-tool > a::before {
    content: "\e65a";
}

#menu-open:checked ~ .menu-out .menu > li > ul > *, .menu-out .menu > li:hover > ul > * {
    --trfm: translateX(1rem);
    --filter: blur(10px);
    animation: var(--animation-otf);
    animation-duration: .5s;
}

.menu-out .menu > li > ul a::before,
.menu-out .menu > li > ul a::after {
    content: "";
    font-family: 'iconfont';
    font-size: var(--icon-size);
    width: var(--icon-size);
    line-height: 1;
    font-weight: normal;
}

.menu-out .menu > li > ul > li > a {
    font-weight: var(--font-weight-title);
}

.menu-out .menu:hover > li > a {
    color: hsl(var(--font-color) / .5);
    text-shadow: none;
}

.menu-out .menu > li > ul > li > a:hover,
.menu-out .menu ul li ul li:hover > a {
    color: var(--color);
}

.menu-out .menu a[target="_blank"]:after {
    content: "\e667";
    width: auto;
}

.menu-out .menu > li:hover > ul > * {
    --trfm: translateX(1rem);
    --filter: blur(10px);
    animation: var(--animation-otf);
    animation-duration: .5s;
}

.menu-out .menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    will-change: transform;
}

.post-menu {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background: none;
    transition: .3s;
}

.header-area .site-icon .tips::after {
    --height: 1rem;
    content: attr(title);
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--f-color);
    background: var(--s-color);
    box-shadow: var(--s-shadow);
    border-radius: var(--radius);
    width: fit-content;
    height: var(--height);
    font-family: var(--top-font-family);
    font-size: var(--font-size-small);
    white-space: nowrap;
    margin: auto;
    padding: 0 4em;
    top: calc((var(--nav-height) - var(--height)) / 2);
    right: 0;
    left: 0;
    line-height: 0;
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    transform: scaleX(1.1);
    pointer-events: none;
    transition: .5s;
}

.nav-bg {
    opacity: 0;
    background: var(--s-bg, rgb(250 250 250 / 90%));
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    z-index: -1;
    border-bottom: var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    transition: .5s;
}

.nav-fixed .nav-bg {
    opacity: 1;
    transition: .5s;
}

.auth-background {
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--box-shadow-white);
    -webkit-backdrop-filter: blur(10px) saturate(1.8);
    backdrop-filter: blur(10px) saturate(1.8);
    transition: var(--animation-in) .4s, pointer-events 0s;
}

.header-area, .content-area {
    padding-inline: var(--edge-lr);
    margin-inline: auto;
}

/* search */
.search-hit-icon:before {
    font-family: 'iconfont';
    content: "\e693";
    font-size: 1.5rem;
}

.custom-search {
    color: rgb(var(--color-rgb) / 80%);
}
.message-single .controls-search{
    color: #fff;
}
/* go-top */
.go-top {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 29;
    background: var(--s-color);
    box-shadow: var(--s-shadow);
    text-shadow: none;
    color: var(--f-color, white);
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    width: var(--icon-size);
    height: var(--icon-size);
    line-height: var(--icon-size);
    margin: 0 0 0 calc(var(--icon-size) * -1.8);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-small);
    visibility: hidden;
    opacity: 0;
    transition: .5s, color 0s;
}

.nav-fixed .go-top {
    margin: 0;
    opacity: 1;
    visibility: visible;
}

.go-top:hover {
    transform: scale(1.2);
    background: var(--color);
}

.go-top:hover .percent,
.go-top .none {
    opacity: 0;
}

.go-top i {
    position: absolute;
    transform: scale(.9);
    transition: .5s;
    font-style: normal;
}

.go-top .btn {
    font-size: inherit;
    transform: rotate(270deg);
}

.go-top:hover .btn, .site-info-list a, .carousel_box a, .reply-content .fn:hover, .user-btn.active,
.article-title a[rel="bookmark"], .menu-out .menu > li > a, .menu-out .menu a, .site-icon a {
    opacity: 1;
}

.go-top .btn::before {
    content: "\e627";
    font-size: 0.75rem;
}

.go-top .iconfont {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--icon-size);
    line-height: var(--icon-size);
    cursor: pointer;
    background: none;
}

@media (max-width: 1152px) {
    .single .content-area {
        width: 100%;
        padding-top: var(--gap-divs);
        margin-top: -1rem;
        animation: none;
    }

    :root {
        --edge-lr: 1rem;
    }

    .header-container .site-header {
        --s-color: var(--title-color);
    }
}

@media (max-width: 671px) {
    .header-container .site-header {
        padding: 0.25rem 0;
    }

    .nav-title, .navigation-single {
        color: var(--s-color);
        text-shadow: var(--s-shadow);
    }

    .header-controls .translate {
        display: none;
    }
}

/* Tags */
.tags-list div:nth-child(6n+1) .tags-item .item-icon {
    background: linear-gradient(to bottom, #9469ff, #9aacf1);
}

.tags-list div:nth-child(6n+2) .tags-item .item-icon {
    background: linear-gradient(to bottom, #ff3737, #ff9e9e);
}

.tags-list div:nth-child(6n+3) .tags-item .item-icon {
    background: linear-gradient(to bottom, #ffc837, #ffc995);
}

.tags-list div:nth-child(6n+4) .tags-item .item-icon {
    background: linear-gradient(to bottom, #4df48a, #8ad6bb);
}

.tags-list div:nth-child(6n+5) .tags-item .item-icon {
    background: linear-gradient(to bottom, #a28fff, #3858f6);
}

.tags-list div:nth-child(6n+6) .tags-item .item-icon {
    background: linear-gradient(to bottom, #ff6135, #ffbaa7);
}

.widget-border {
    position: absolute;
    top: -3px;
    left: 0;
    width: 36px;
    height: 30px;
    border-radius: 4px;
}

.widget-border:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 10px;
    background-color: #3858f6;
    opacity: 1;
    transform: translateY(-50%) rotate(15deg);
    transition: all .4s ease-in-out;
}

.widget-border:after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 16px;
    border-radius: 10px;
    background-color: #3858f6;
    opacity: .6;
    transform: translateY(-50%) rotate(15deg);
    transition: all .4s ease-in-out;
}

/* page */
.archive .site-main, .talk_list .site-main, .tags .site-main, .article_list .site-main, .book .site-main, .agreement-page .site-main,
.talk-info-single .site-main, .single-format-video .site-main {
    display: grid;
    gap: var(--gap-divs);
}

.page-header {
    display: grid;
    position: relative;
}
.page-header .post-title::after,.page-header .page-title::after {
    --height: .25em;
    content: "";
    display: inline-block;
    width: calc(var(--height)*3);
    height: var(--height);
    margin: 0 0 calc(var(--height)*-1) calc(var(--height)*.5);
    opacity: 0;
    border-radius: var(--height);
    background: linear-gradient(90deg,rgb(var(--color-rgb) / 20%),#0000) no-repeat 0 50% / 100% 100%, radial-gradient(circle,rgb(var(--color-rgb) / 70%) 45%,#0000 50%) no-repeat 0 50% / var(--height) var(--height);
    transform: rotate(0) scale(2);
    transform-origin: left;
    transition: .5s ease-in .7s;
}
.page-header .post-title.fade-after::after,.page-header .page-title.fade-after::after {
    opacity: 1;
    transform: rotate(-45deg);
}
.page-header > h1, .taxonomy-des {
    font-family: var(--top-font-family);
}

.taxonomy-des {
    max-width: 90%;
}
.taxonomy-des p{
    margin: 1.5em 0;
}
.page-header > h1 {
    color: rgb(var(--color-rgb) / .7);
}

time {
    flex: none;
    font-variant: lining-nums;
    display: inline-block;
}

@media (min-width: 1153px) {

    .wide .site-main {
        grid: 1fr / clamp(10rem, 15vw, var(--card-size)) 1fr;
        gap: 4rem;
        place-items: stretch;
    }

    .wide .page-header {
        --edge: calc(var(--edge-tb) + var(--gap-divs));
        grid-area: 1 / 1 / 2 / 2;
        position: sticky;
        top: var(--edge);
        height: calc(100vh - var(--edge) * 2.25);
        align-content: center;
    }
}

@media (max-width: 761px) {
    .wide .page-header {
        padding: 0 1rem;
    }
}

/* fancybox */

.fancybox__content.entry-content {
    padding: 0 var(--edge-lr);
    width: min(60rem, 100%);
}

.fancybox__container {
    --fancybox-opacity: .98;
    --fancybox-bg: var(--h-bg);
    --fancybox-color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
    --fancybox-content-color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
    --fancybox-content-bg: none;
}

.fancybox__content.comment-respond {
    margin: var(--edge-lr);
    width: calc(100% - var(--edge-lr) * 2);
}

.fancybox__toolbar {
    font-family: var(--top-font-family) !important;
    --fancybox-toolbar-text-shadow: none;
    --f-button-width: 1.5rem;
    --f-button-height: 1.5rem;
    --f-button-bg: none !important;
    --f-button-svg-filter: none !important;
    --f-button-hover-bg: var(--color) !important;
}

.fancybox__nav {
    --f-button-svg-filter: none;
    --f-button-hover-bg: var(--color-sub);
}

.fancybox__footer {
    background: var(--w-bg) !important;
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius) var(--radius) 0 0;
    text-align: center;
}

.v-images-wrap .img-container {
    background: var(--h-bg);
    opacity: var(--fancybox-opacity, 1);
    will-change: opacity;
}

.fancybox__container {
    --fancybox-opacity: .98;
    --fancybox-bg: var(--h-bg) !important;
    --fancybox-color: hsl(var(--font-color-hsl) / var(--font-color-alpha)) !important;
    --fancybox-content-color: hsl(var(--font-color-hsl) / var(--font-color-alpha)) !important;
    --fancybox-content-bg: none !important;
}

/* comment */
img.comment-emoji {
    display: inline-block;
    width: 32px;
    height: auto;
}
.comments-area {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.comment_list {
    --avatar-size: 1.75rem;
    --avatar-gap: calc(var(--avatar-size) + .5rem);
    position: relative;
    padding: 1rem;
    border-radius: var(--radius);
    background: var(--s-bg, rgb(0 0 0 / .025));
    box-shadow: var(--s-box-shadow);
    break-inside: avoid;
    transition: .5s;
}

.children_box {
    border-top: 1px dashed hsl(var(--font-color) / .2);
    margin: 1rem 0 0 0;
    font-size: var(--font-size-medium);
}

.comment-child .avatar-img {
    width: var(--avatar-size);
    height: var(--avatar-size);
    background: var(--w-bg);
    border-radius: 50%;
    object-fit: cover;
    overflow: hidden;
}

.comment-child .user-name {
    font-size: var(--font-size-medium);
}

.reply-content .fn {
    text-transform: capitalize;
    margin: 0 0.5em 0 0;
}

.comment-reply-title {
    font-size: var(--font-size-title);
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-title);
    color: var(--color);
    white-space: nowrap;
    margin-bottom: 0.85rem;
}

.fancybox__content.comment-respond {
    margin: var(--edge-lr);
    width: calc(100% - var(--edge-lr) * 2);
}

.fancybox__content.comment-respond {
    display: block !important;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    font-family: var(--top-font-family);
}

.user-name {
    font-weight: 500;
    margin-right: 5px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.user-badge {
    width: fit-content;
    height: fit-content;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    border-color: #b3d8ff;
    color: #409eff;
    padding: 0.1rem;
    border-radius: 4px;
    font-size: 10px;
    margin-right: 5px;
}

.message-single .user-badge {
    border-color: transparent;
}

.comment-time {
    --font-color-alpha: .3;
    font-size: var(--font-size-small);
}

time {
    flex: none;
    font-variant: lining-nums;
    display: inline-block;
}

.commentContent > p {
    margin-right: 1rem;
    font-family: var(--top-font-family);
}

.commentContent .comment-emoji {
    margin: 0 0.25rem;
    display: inline-block;
    width: 32px;
    height: auto;
}

.comment-input .comment-emoji {
    display: inline-block;
    width: 50px;
    height: 50px;
}

.recent-comment .comment-emoji {
    width: 35px;
    height: 35px;
}

.fancybox__content.comment-respond .f-button.is-close-btn {
    top: -10px !important;
}

@media (max-width: 1152px) {
    .fancybox__content.comment-respond .user-avatar {
        display: none;
    }
}

/* submit-btn */
.button, :where(.nav-previous, .nav-next) a {
    --button-size: 1.5rem;
    gap: .5em;
    overflow: hidden;
}

.sub-btn .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: auto;
    min-width: var(--button-size, auto);
    height: 50px;
    line-height: 1;
    border: 1px solid #ccc;
    padding: calc(var(--button-size, 4em) / 4);
    background: linear-gradient(180deg, #fff, #f3f3f3);
    border-radius: 4px;
    position: relative;
    transition: all 1s;
    overflow: hidden;
    text-transform: uppercase;
    text-decoration: none;
}

.sub-btn .primary:hover {
    color: rgb(var(--color-rgb));
    border-color: rgb(var(--color-rgb) / 0.5) !important;
}

/* about page amap*/
.maps-area.fancybox__content {
    visibility: visible;
    flex: none;
    inset: 0;
    -webkit-mask: none;
    color: inherit;
    pointer-events: auto;
    position: fixed;
    padding: 0;
}

.maps-area.fancybox__content .f-button {
    position: fixed !important;
    top: 0 !important;
    color: white;
    box-shadow: var(--box-shadow);
    background: rgb(255 255 255 / 5%);
    border-radius: var(--radius);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    height: 3rem;
    width: 3rem;
}

.maps-area.fancybox__content .maps-name, .maps-area.fancybox__content .amap-toolbar,
.maps-area.fancybox__content .amap-scalecontrol, .maps-area.fancybox__content .amap-ctrl-list-layer {
    color: inherit;
    padding: 0.5rem;
    line-height: 1;
    inset: auto;
    box-shadow: var(--box-shadow);
    background: rgb(255 255 255 / 5%);
    border-radius: var(--radius);
    backdrop-filter: saturate(1.8) blur(20px);
}

.maps-area.fancybox__content .amap-maptype ul, .maps-area.fancybox__content .amap-toolbar span {
    cursor: pointer;
    color: inherit !important;
    border: 0 !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    line-height: 1;
    background: none !important;
}

input[type="radio"]:checked {
    background: linear-gradient(135deg, rgb(var(--color-rgb) / .8), rgb(var(--color-sub-rgb) / .8));
}

.about-single .amap {
    width: 100%;
    min-height: 360px;
    position: relative;
    margin-top: 1.5rem;
}

.amap h5 {
    position: absolute;
    top: 0.85rem;
    margin: 0 0.85rem;
    color: #FFFFFF;
    width: 100%;
    z-index: 2;
    font-size: var(--font-size-normal);
    text-transform: uppercase;
}

.amap h5:after {
    color: #FFFFFF;
    position: absolute;
    content: attr(title);
    right: 0.85rem;
    margin-right: 0.85rem;
    opacity: .5;
}

.maps-area {
    position: absolute;
    display: block !important;
    width: 100%;
    height: 100%;
}

.amap-container {
    width: 100%;
    height: 100%;
    cursor: move;
    padding: var(--gap-divs) var(--edge-lr);
    border-radius: var(--radius);
}

.about-single .amap-controls .amap-scalecontrol, .amap-container .amap-logo, .amap-container .amap-copyright,
.about-single .amap-controls .amap-toolbar, .about-single .amap-container .amap-marker, .about-single .amap-ctrl-list-layer,
.amap-ctrl-overlay-layer {
    display: none !important;
}

.amap .info {
    position: absolute;
    z-index: 2;
    bottom: 0.85rem;
    margin: 0 0.85rem;
}

.amap .info img {
    height: 1.5rem;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3)) brightness(1.2);
}

/* footer */
.footer-tens .days {
    font-family: SmileySans;
}

/* 站点面板 */
#menu-toggle + label {
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    height: var(--icon-size);
    width: var(--icon-size);
    z-index: 31;
    cursor: pointer;
    transition: 1s;
    margin: auto 0;
}

#menu-toggle + label i {
    width: 100%;
    height: calc(var(--icon-size) / 5);
    background: var(--s-color);
    box-shadow: var(--s-shadow);
    position: absolute;
    border-radius: calc(var(--icon-size) * .15);
    transition: .5s var(--animation-on);
    inset: 0;
    margin: auto;
}

#menu-toggle:checked + label {
    scale: 1.1;
    --s-shadow: none;
    --s-color: hsl(var(--font-color-hsl) / var(--font-color-alpha));
}

#menu-toggle:checked + label i.left {
    width: 100% !important;
    transform: rotate(-45deg) !important;
}

#menu-toggle:checked + label i.right {
    width: 100% !important;
    transform: rotate(45deg) !important;
}

#menu-toggle:checked + label i.center {
    width: 0 !important;
}

#menu-toggle + label.widget i {
    right: auto;
    width: calc(var(--icon-size) / 3);
    height: calc(var(--icon-size) / 3);
    transform: translateY(calc(var(--icon-size) / 4));
}

#menu-toggle + label.widget i.left {
    width: 100%;
    transform: translateY(calc(var(--icon-size) / -4));
}

#menu-toggle + label.widget i.right {
    left: auto;
    right: 0;
    width: calc(var(--icon-size) / 2);
}

#menu-toggle + label.widget:hover i.left {
    width: calc(var(--icon-size) / 2.5);
    background: var(--color-sub);
}

#menu-toggle + label.widget:hover i.right {
    width: calc(var(--icon-size) / 2.5);
    background: var(--color);
    height: calc(var(--icon-size) / 1.15);
    transform: none;
}

#menu-toggle + label.widget:hover i.center {
    width: calc(var(--icon-size) / 2.5);
    background: rgb(var(--color-rgb) / 0.85);
}

#menu-toggle:checked + label:is(.widget, .widget:hover) i {
    height: calc(var(--icon-size) / 4.5);
}

/* menu-widget */
.menu-widgets {
    position: fixed;
    display: grid;
    align-items: center;
    align-content: center;
    width: 100%;
    height: 100vh;
    inset: 0;
    opacity: 0;
    padding: var(--gap-divs) var(--edge-lr);
    pointer-events: none;
    background: radial-gradient(circle at 25% 65%, rgb(var(--color-rgb) / .2), #0000 25%) no-repeat fixed,
    radial-gradient(circle at 75% 35%, rgb(var(--color-sub-rgb) / .2), #0000 25%) no-repeat fixed var(--h-bg);
    background-size: 100vw 100vh;
    overflow: hidden;
    visibility: hidden;
    z-index: 30;
    transition: .5s ease, pointer-events 0s;
    color: var(--menu-widgets-color);
}

.menu-widgets .site-icon {
    display: flex;
    align-items: center;
    gap: var(--gap-divs);
    cursor: pointer;
}

.user-btn.active:before {
    font-size: 1.35rem;
}

.menu-widgets .site-icon .toggler:hover .sun::before, .menu-widgets .site-icon .toggler:hover .night::before,
.user-btn.active:hover {
    color: var(--color);
    filter: brightness(1.25);
}

.menu-widgets .icon-area {
    position: fixed;
    height: var(--nav-height);
    right: calc(var(--edge-lr) + var(--gap-divs) + var(--icon-size));
    top: 0;
    z-index: 3;
}

.menu-widgets .user-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--gap-divs);
    z-index: 2;
}

.menu-widgets .user-card {
    --avatar-size: 4.5rem;
    display: flex;
    align-items: center;
    gap: 0 1em;
    text-transform: uppercase;
    font-size: 1.05em;
    font-weight: var(--font-weight-title);
}

.user-card-info .name {
    line-height: 2.1rem;
}

.menu-widgets .user-card .mail {
    font-size: var(--font-size-small);
    font-weight: normal;
}

.menu-widgets .user-avatar {
    --border-size: .1em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    font-size: calc(var(--avatar-size) / 1.5);
    aspect-ratio: 1;
    line-height: 1;
    transform: scale(1.2) rotate(5deg);
    transition: .5s;
}

.menu-widgets .user-avatar {
    position: relative;
    width: var(--avatar-size);
    height: var(--avatar-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-widgets .user-avatar::before {
    content: " ";
    position: absolute;
    width: 120%;
    height: 120%;
    background: url("@/assets/user/lv.png") center / cover;
    opacity: .7;
    pointer-events: none;
    z-index: 2;
    animation: rotate 15s linear infinite paused;
}

.icon-random-fill:before {
    font-size: 1.25rem;
}

#menu-toggle:checked ~ .menu-widgets .user-avatar::before,
.comment-body:hover .user-avatar::before {
    animation-play-state: running;
}

#menu-toggle:checked ~ .menu-widgets .user-avatar {
    transform: none;
}

.menu-widgets .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    background: var(--w-bg);
    border-radius: 50%;
    filter: drop-shadow(0 0 1px rgb(0 0 0 / 20%));
}

.menu-widgets .user-card .user-avatar::after {
    font-size: var(--font-size-small);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    color: white;
    opacity: 0;
    transition: .3s;
}

.menu-widgets .user-card.admin .user-avatar::after {
    content: "管理站点";
}

.menu-widgets .user-card.guest .user-avatar::after {
    content: "关于站点";
}

.menu-widgets .user-card .user-avatar:hover::after {
    opacity: 1;
}

.menu-widgets .user-tools {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    background-color: var(--s-bg, rgb(255 255 255 / .7));
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
    overflow: auto;
}

.menu-widgets .user-tools .site-icon {
    margin: 0 var(--gap-divs);
}

:root[theme="dark"] #theme-toggle:before {
    content: "\e60e";
}

.user-btn.active:before {
    content: "\e8c5";
}

.user-sub:not(.active) {
    display: none;
}

.guest-area {
    grid-area: widget-area;
}

.guest-area .comment-area {
    --filter: blur(10px);
    --trfm: translateY(1rem);
    display: flex;
    gap: var(--gap-divs);
    border-radius: var(--radius);
    padding: var(--gap-divs);
    background: var(--s-bg, rgb(255 255 255 / .7));
    box-shadow: var(--box-shadow-white);
    flex-direction: column;
}

.guest-area .comment-area ul {
    display: grid;
    gap: var(--gap-divs);
    margin: 0;
    grid: auto / repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.guest-area .comment-area ul li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
}

.guest-area .comment-area time {
    position: relative;
    font-size: var(--font-size-small);
}

.guest-area .comment-area time:after {
    content: "";
    width: 6px;
    height: 200%;
    background: linear-gradient(180deg, #0000, rgb(var(--color-rgb) / 20%), #0000) no-repeat center / 2px 100%, radial-gradient(circle, rgb(var(--color-rgb) / 70%) 50%, #0000 50%) no-repeat center / 6px 6px;
    position: absolute;
    top: 0;
    right: calc(-.8rem - 3px);
    bottom: 0;
    margin: auto;
    transition: .5s;
}

.guest-area .comment-area ul li:hover time::after {
    background-size: 2px 0, 12px 6px;
}

.guest-area .comment-area .content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.menu-area-content {
    overflow: auto;
    display: grid;
    grid:
		"widget-area widget-area"
		"site-des widget-out";
    gap: var(--gap-divs);
    align-items: center;
    height: 100%;
    padding: var(--gap-divs) 0;
    overscroll-behavior-y: contain;
    transform: translateY(1rem);
    transition: .5s;
}

#menu-toggle:checked ~ .menu-widgets .menu-area-content,
#menu-toggle:checked ~ .menu-widgets {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.menu-area-content .site-des {
    grid-area: site-des;
    opacity: .2;
    font-size: var(--icon-size);
    font-family: SmileySans;
    letter-spacing: var(--font-spacing);
}

.menu-area-content .site-des::before {
    content: "\e698";
    font-family: 'iconfont';
    margin: 0 .5em 0 0;
}

.widget-out {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gap-divs);
    grid-area: widget-out;
}

.widget-out h2 {
    display: none;
}

.widget-out .widget {
    flex: 6rem;
    position: relative;
    cursor: pointer;
}

.widget-area :is(ul, ol) {
    margin: 0;
}

.widget-area time, .widget-area .hot-value {
    font-size: var(--font-size-small);
    flex: none;
    order: 3;
    position: relative;
}

.widget-area time::after, .widget-area .hot-value::after {
    content: "";
    width: 6px;
    height: 400%;
    background: linear-gradient(180deg, #0000, rgb(var(--color-rgb) / 20%), #0000) no-repeat center / 2px 100%,
    radial-gradient(circle, rgb(var(--color-rgb) / 70%) 50%, #0000 50%) no-repeat center / 6px 6px;
    position: absolute;
    top: 0;
    right: calc(-.8rem - 3px);
    bottom: 0;
    margin: auto;
    transition: .5s;
}

.widget-area li:hover time::after, .widget-area li:hover .hot-value::after {
    background-size: 2px 0, 12px 6px;
}

.widget-area {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-divs);
    grid-area: widget-area;
}

.widget-area .widget {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: min(var(--card-size), 100%);
    background: var(--s-bg, rgb(255 255 255 / .7));
    box-shadow: var(--box-shadow-white);
    border-radius: var(--radius);
    padding: var(--gap-divs);
    overflow-wrap: anywhere;
}

#menu-toggle:checked ~ .menu-widgets .widget-area .widget {
    --trfm: translateY(1rem);
    --filter: blur(10px);
    animation: var(--animation-otf);
    animation-duration: .7s;
}

/* 日历 */
.el-calendar {
    background-color: transparent !important;
}

.el-calendar__header {
    padding-top: 0 !important;
    line-height: 2;
    border-bottom: none !important;
}

.el-calendar__header .el-calendar__title {
    position: relative;
    width: 100%;
    font-weight: 600;
}

.el-calendar__header .el-calendar__title::after {
    content: "CALENDAR";
    position: absolute;
    right: 0;
    top: 0;
    opacity: .2;
}

.el-calendar__header .el-calendar__button-group {
    display: none !important;
}

.el-calendar__body {
    padding: 0 !important;
}

.el-calendar-table {
    flex: 100%;
    border: none !important;
}

.el-calendar-table thead {
    background: none !important;
}

.el-calendar-table th,
.el-calendar-table td {
    background: none !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 3;
    text-align: center;
    vertical-align: middle;
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

.el-calendar-table .el-calendar-day {
    height: 55px !important;
}

.widget-area .is-today {
    color: transparent !important;
}

.widget-area .is-today .el-calendar-day::before {
    content: "今天";
    color: rgb(var(--color-rgb) / 80%);
    width: 0;
    white-space: nowrap;
    position: relative;
    left: -0.5em;
    display: inline-block;
    pointer-events: none;
}

/* 最近文章 */
.widget-area .widget_recent_entries::before {
    content: "最近动态";
    letter-spacing: var(--font-spacing);
    line-height: 2;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.widget-area .widget_recent_entries::after {
    content: "RECENT";
    position: absolute;
    right: 1rem;
    top: 2rem;
    opacity: .2;
}

.widget-area .block-tag-cloud,
.widget-area .block-rss.book,
.widget-area .block-latest-posts,
.widget-area .block-baidu-hot {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.widget-area .block-rss.book li,
.widget-area .block-latest-posts li,
.widget-area .block-baidu-hot li {
    position: relative;
    display: flex;
    flex-flow: row-reverse nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2.4rem;
}

.widget-area .block-rss.book li a,
.widget-area .block-latest-posts li a, .widget-area .block-baidu-hot li a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    opacity: 1;
}

.widget-area .block-rss__item-excerpt {
    right: 0;
    left: auto;
    bottom: auto;
    pointer-events: none !important;
}

/* 书籍动态 */
.widget-area .widget_rss::before {
    content: "阅读动态";
    font-weight: 600;
}

.widget-area .widget_rss:before, .widget-area .widget_hot_search::before {
    letter-spacing: var(--font-spacing);
    line-height: 2;
    margin: 0 0 1.5rem 0;
}

.widget-area .widget_rss::after {
    content: "READ";
    position: absolute;
    right: 1rem;
    top: 2rem;
    opacity: .2;
}

.widget-area .block-rss__item-excerpt {
    content: "查看 " attr(aria-label) "";
    position: absolute;
    font-size: var(--font-size-small);
    z-index: 2;
    opacity: 0;
    line-height: 2;
    display: block;
    font-weight: 400;
    color: rgb(var(--color-rgb) / .7);
    transform: translateY(10px);
    visibility: hidden;
    background: rgb(var(--color-rgb) / .1) !important;
    padding: 0.05rem 0.5rem;
    border-radius: 0.5rem;
    filter: blur(10px);
    backdrop-filter: blur(10px) saturate(1.8);
    transition: .5s, pointer-events 0s;
}

.widget-area .block-rss__item-excerpt {
    right: 0;
    left: auto;
    bottom: auto;
    pointer-events: none !important;
}

.widget-area .block-rss.book li:hover .block-rss__item-excerpt, .widget-area .widget_hot_search li:hover .block-rss__item-excerpt {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
    visibility: visible;
    transform: translateY(0);
}

/* hot */
.widget-area .widget_hot_search.baidu::before {
    content: "百度热搜";
    font-weight: 600;
}

.widget-area .widget_hot_search.baidu::after {
    content: "BAIDU";
    position: absolute;
    right: 1rem;
    top: 2rem;
    opacity: .2;
}

.widget-area .widget_hot_search.weibo::before {
    content: "微博热搜";
    font-weight: 600;
}

.widget-area .widget_hot_search.weibo::after {
    content: "WEIBO";
    position: absolute;
    right: 1rem;
    top: 2rem;
    opacity: .2;
}

/* Search widget */
.user-tools .search-form input {
    border: 0;
    margin: 0;
    vertical-align: middle;
    outline: none;
    width: 100%;
    accent-color: rgb(var(--color-rgb) / .8);
    border-radius: var(--radius);
    -webkit-appearance: none;
    padding: 0.85em 1em;
    line-height: inherit;
    transition: .5s;
    background: none;
    box-shadow: none;
}

.user-tools .search-form input:where([type="button"], [type="reset"], [type="submit"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    cursor: pointer;
    width: auto;
    min-width: var(--button-size, auto);
    min-height: var(--button-size, auto);
    line-height: 1;
    padding: calc(var(--button-size, 4em) / 4);
    background: linear-gradient(135deg, rgb(var(--color-rgb) / .8), rgb(var(--color-sub-rgb) / .8)) !important;
    box-shadow: 0 0 1rem 0 rgb(var(--color-rgb) / .2), 0 0.5rem 1rem -0.5rem rgb(var(--color-rgb) / .5);
    border-radius: calc(var(--button-size, var(--radius)) / 2);
}

.user-tools .search-form {
    display: flex;
    align-items: center;
    flex: auto;
    background: var(--bg);
    border-radius: var(--radius);
    line-height: 1;
}

.user-tools .search-form label {
    width: 100%;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    left: -1000em;
    word-wrap: normal;
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.user-tools .search-form {
    border-radius: 0;
    transition: .5s;
}

.user-tools .search-form:hover {
    background: var(--s-bg, rgb(255 255 255 / .7));
    flex: 0 0 100%;
}

.user-tools .search-form .search-submit {
    width: 0;
    padding-inline: 0;
}

.user-tools .search-form:hover .search-submit {
    padding: 1em;
    width: 4.5rem;
}

.search-field {
    background: none;
    box-shadow: none;
}

.search .page-title {
    display: flex;
    align-items: center;
}
@media (max-width: 1152px){
    .menu-widgets .user-tools {
        flex: 0 0 100%;
    }
    .menu-area-content .site-des {
        margin: 0 auto;
    }
}
/* 走马灯 */
.carousel_box {
    border-radius: 0.25rem;
    position: relative;
    display: flex;
    overflow: hidden;
}

.blur-img {
    z-index: 0;
}

.blur-img img {
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 18.75rem;
    transform: scale(1.55);
}

.carousel_body {
    z-index: 10;
    margin: 0;
    width: 40%;
    border-width: 0;
    clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.carousel_body img {
    opacity: 1;
    filter: blur(0);
    transition: all .3s cubic-bezier(0, 0, .2, 1);
    object-fit: cover;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.carousel_right {
    display: flex;
    z-index: 10;
    padding: 1.25rem 1rem;
    color: #fff;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    background-color: rgba(0, 0, 0, .35);
}

.carousel_right .top_info {
    display: flex;
    font-size: .75rem;
    line-height: 1rem;
    justify-content: space-between;
}

.top_info .publish_date {
    font-size: 14px;
}

.top_info .publish_date:before {
    font-family: iconfont;
    margin: 0 0.25em 0 0;
    content: "\e65f";
}

.carousel_right .post_info {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.carousel_right .post_info .recommend_img {
    display: flex;
    margin-right: 0.5rem;
    align-items: center;
}

.carousel_right .post_info .recommend_img img {
    margin-right: 0.25rem;
    width: 18px;
}

.carousel_right .post_info .tag_list {
    margin-left: 0.25rem;
}

.carousel_right .post_info .tag_list p::before {
    font-family: 'iconfont';
    content: "\e659";
    margin: 0;
}

.carousel_title {
    font-weight: 700;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 20px;
    line-height: 1.75rem;
    letter-spacing: .05em;
    color: #fff;
    overflow: hidden;
}

.carousel_abstract {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 12px;
    line-height: 1.5rem;
    word-break: break-all;
    overflow: hidden;
    color: #fff;
    letter-spacing: .06rem;
    text-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, .3);
}

.swiper-button-prev, .swiper-button-next {
    width: 46px !important;
    height: 46px !important;
}

.swiper-button-prev {
    background: url(@/assets/curr_prev.png) no-repeat center center;
}

.swiper-button-next {
    background-size: auto;
    background-image: url(@/assets/curr_next.png);
}

.swiper-button-prev:after, .swiper-button-next:after {
    content: '' !important;
}

@media (min-width: 768px) {
    .carousel_box {
        background-color: #000;
        border-width: 0;
        height: 18.75rem;
    }

    .blur-img img {
        filter: blur(1.875rem) brightness(.75);
    }

    .carousel_body {
        display: block;
    }

    .carousel_right {
        background-color: unset;
        padding: 3rem 2rem;
        width: 66.666667%;
    }

    .carousel_title {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .carousel_abstract {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .el-carousel__container {
        height: 8.75rem !important;
    }

    .blur-img img {
        height: 10.75rem;
    }

    .carousel_body {
        display: none;
    }
}

/* 标签 */
.widget-area .block-tag-cloud {
    height: 100%;
    gap: var(--gap-span);
    flex-direction: row;
    align-content: space-between;
    overflow: auto;
    margin: calc(var(--gap-span) * -1) calc(var(--gap-divs) * -1);
    padding: var(--gap-span) var(--gap-divs);
    -webkit-mask: linear-gradient(180deg, #0000, #000) no-repeat 100% 0 / 100% var(--gap-divs),
    linear-gradient(180deg, #000, #000) no-repeat 100% center / 100% calc(100% - var(--gap-divs) * 2),
    linear-gradient(180deg, #000, #0000) no-repeat 100% 100% / 100% var(--gap-divs);
}

.widget-area .block-tag-cloud a {
    border: 0;
    margin: 0;
    padding: 0;
}

/* mobile menu */
.mobile-menu .mobile-menu-item {
    width: calc(50% - 8px);
    margin: 4px;
    height: 4.2rem;
    border: var(--border);
    border-radius: var(--radius);
}

.mobile-menu .mobile-menu-item > div {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.mobile-menu .mobile-menu-item:hover > div > span {
    color: var(--color);
}

/* notice */
.notice-components {
    position: fixed;
    bottom: 30px;
    right: 70px;
    z-index: 10;
}

.notice-box {
    position: fixed;
    bottom: 5%;
    right: 1%;
    z-index: 999;
    padding: 10px 10px 22px 20px;
    width: 400px;
    height: 175px;
    border-radius: var(--radius);
    background-color: var(--w-bg);
    background-position: right 50%;
    background-repeat: no-repeat;
    background-size: 130px;
    background-image: url(https://npm.onmicrosoft.cn/hanyanzhi@1.0.0/user/notice.png);
    box-shadow: 0 0 8px rgba(255, 112, 173, 0.35);
}

.notice-box_title {
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 2;
}

.notice-box_title > p {

}

.notice-box_info {
    width: 245px;
    margin-top: 0.5rem;
}

.notice-box_info .info_span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-break: anywhere;
    -webkit-line-clamp: 3;
    font-size: 14px;
    text-align: justify;
    min-height: 62px;
    text-indent: 2em;
}

.notice-box_btn > button {
    margin-top: 10px;
    display: inline-block;
    height: 40px;
    width: 120px;
    line-height: 40px;
    text-align: center;
    border-radius: var(--radius);
    color: #fff;
    background-color: #00b2ff;
    font-weight: 600;
    cursor: pointer;
}

.notice-box_btn:hover > button {
    color: var(--color-sub);
}

.notice-box_close {
    position: absolute;
    width: 15px;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

.notice-box_close:hover svg {
    scale: 1.25;
}

@media (max-width: 1024px) {
    .notice-components {
        display: none;
    }
}


/* =PC
----------------------------------------------- */
@media (min-width: 1153px) {
    .single .entry-content {
        width: min(var(--content-size), 100%);
    }

    .widget-area .block-tag-cloud {
        max-height: 22.5rem;
    }

    .post-menu {
        left: 0;
        right: 0;
        margin: 0 auto;
        transform: translateY(-1rem);
        width: calc(100% - 30rem);
        height: var(--nav-height);
    }

    .icon-mulu:before {
        content: '';
    }
}

@media (min-width: 1152px) {
    .fancybox__toolbar {
        --f-button-width: 3.75rem;
        --f-button-height: 3.75rem;
    }
}

/* =mobile
----------------------------------------------- */
@media (min-width: 642px) {
    .nav-fixed .header-container {
        border-radius: 0 0 1rem 1rem;
        border-bottom: var(--border);
    }
}

@media (max-width: 1152px) {
    body:not(.nav-fixed) .header-area {
        --s-color: var(--title-color);
    }

    .post-menu .site-title {
        display: none;
    }
}

@media (max-width: 641px) {
    .apply-submit {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .site-menu {
        margin: 0 0 0 auto;
    }

    .header-area .iconfont.menu-open {
        display: flex;
    }

    #menu-open ~ .menu-open::before {
        position: relative;
        transition: .3s;
    }

    .menu-open::after {
        content: "";
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        background: rgb(0 0 0 / 50%);
        visibility: hidden;
        opacity: 0;
        z-index: 32;
        transition: .5s;
    }

    #menu-open:checked + label::after {
        visibility: visible;
        opacity: 1;
    }

    body:not(.nav-fixed) .header-area {
        position: absolute;
    }

    .nav-fixed .header-area {
        top: auto;
        bottom: 0;
        animation: var(--animation-ot);
    }

    .nav-fixed .header-area .site-logo {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: 0s;
    }

    .nav-fixed .site-menu {
        position: absolute;
        margin: 0;
    }

    .nav-fixed .header-area > .site-icon {
        width: 100%;
        justify-content: space-between;
    }

    .nav-fixed .header-area > .site-icon:before {
        content: "";
        width: var(--icon-size);
    }

    .nav-fixed .post-menu {
        visibility: visible;
        opacity: 1;
        position: relative;
    }

    .nav-bg {
        border-top: var(--border);
        box-shadow: var(--box-shadow);
        border-radius: var(--radius) var(--radius) 0 0;
        transition: none;
    }

    .menu-out {
        --timing-jump: .75s var(--animation-on);
        position: fixed;
        margin: auto;
        inset: 1.5rem;
        background: var(--s-bg, rgb(255 255 255 / 90%));
        box-shadow: var(--box-shadow);
        border-radius: var(--radius);
        visibility: hidden;
        transform: translateX(calc(100% + 1.5rem));
        z-index: 33;
        transition: visibility var(--timing-jump), transform var(--timing-jump);
        overflow-y: scroll;
    }

    #menu-open:checked ~ .menu-out {
        transform: none;
        visibility: visible;
    }

    .menu-out .menu {
        flex-direction: column;
        -webkit-mask: linear-gradient(180deg, #00000000, #000) no-repeat 0 0 / 100% calc(var(--edge-lr) * 2),
        linear-gradient(180deg, #000, #000) no-repeat center / 100% calc(100% - var(--edge-lr) * 4),
        linear-gradient(180deg, #000, #00000000) no-repeat 100% 100% / 100% calc(var(--edge-lr) * 2);
        overflow-y: scroll;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding: 1.5rem 1.5rem calc(env(safe-area-inset-bottom) + 1.5rem);
    }

    .menu-out .menu li {
        height: 100%;
        width: 100%;
    }

    .menu-out .menu li ul {
        position: static;
        display: block;
        width: auto;
        opacity: 1;
        padding: .5rem 0;
        background: none;
        border: none;
        box-shadow: none;
        pointer-events: auto;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transform: none;
        visibility: visible;
    }

    .menu-out .menu li ul > li ul {
        display: grid;
        grid: auto / repeat(auto-fill, minmax(min(7.5rem, 100%), 1fr));
        justify-items: start;
        margin: 0;
        gap: 0;
        padding: 0.75rem 0;
    }

    .menu-out .menu > li > ul a::after {
        width: auto;
        opacity: .2;
        font-size: var(--font-size-small);
        text-transform: uppercase;
    }

    .menu-out .menu > li > a {
        line-height: 2;
        padding: 0;
        width: fit-content;
        color: hsl(var(--font-color) / var(--font-alpha));
        text-shadow: none;
    }

    .menu-out .menu li li {
        padding: .5rem 0;
        background: none;
    }

    .header-controls .controls-search {
        display: none;
    }
}

/* 通用动画 */
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(359deg)
    }
}

/* 背景动画 */
@keyframes bg-position {
    0% {
        background-position: center 20%;
    }
    100% {
        background-position: center 100%;
    }
}

/* 文章动画 */
@keyframes bg-height {
    0% {
        height: 0;
    }
    100% {
        height: 100vh;
    }
}

@keyframes m-post-siteBG {
    0% {
        height: 100%;
    }
    100% {
        height: 50%;
    }
}

@keyframes perspective-hover {
    0% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
        background-position: 200% 100%;
    }
    50% {
        transform: perspective(1600px) rotateX(5deg) rotateY(5deg) translateZ(50px);
    }
    100% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(100px);
        background-position: 50% 100%;
    }
}

@keyframes perspective-reverse {
    0% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(100px);
        background-position: 50% 100%;
    }
    50% {
        transform: perspective(1600px) rotateX(-5deg) rotateY(-5deg) translateZ(50px);
    }
    100% {
        transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
        background-position: -100% 100%;
    }
}

@keyframes numbg-hover {
    0% {
        background-position: 200% 100%;
    }
    100% {
        background-position: 50% 100%;
    }
}

@keyframes numbg-reverse {
    0% {
        background-position: 50% 100%;
    }
    100% {
        background-position: -100% 100%;
    }
}
